import BaseTable from "@/components/BaseTable";
import type { BaseTableProps } from "@/components/BaseTable";
import { Button } from "antd";
import moment from "moment";
import type { TableListItem } from "./index";
import { useState } from "react";

const tableListDataSource: TableListItem[] = [];
const creators = ["付小小", "曲丽丽", "林东东", "陈帅帅", "兼某某"];

for (let i = 0; i < 30; i += 1) {
  tableListDataSource.push({
    key: i,
    name: `三年${i + 1}班李子明父亲`,
    relation: "父子",
    startTime: moment(new Date()).format("YYYY/MM/DD HH:mm"),
    creators: creators[Math.floor(Math.random() * creators.length)]
  });
}

const Invite: React.FC = () => {
  const [isDeleteInfo, setIsDeleteInfo] = useState(false);
  const [isAgreeInfo, setIsAgreeInfo] = useState(false);
  const [homework, setHomework] = useState(0);

  /** 拒绝按钮 */
  const handleOpenRejectModal = (paramsId: any) => {
    setIsDeleteInfo(true);
    setHomework(paramsId.name);
    console.log(paramsId.key + 1, paramsId);
  };

  const handleCloseDeleteModal = () => {
    setIsDeleteInfo(false);
  };

  const handleOpenAgreeModal = (paramsId: any) => {
    setIsAgreeInfo(true);
    setHomework(paramsId.name);
    console.log(paramsId.key + 1, paramsId);
  };

  const handleCloseAgreeModal = () => {
    setIsAgreeInfo(false);
  };

  const rejectInfoProps = {
    type: "reject",
    info: `是否拒绝 ${homework} 的申请`,
    isModalOpen: isDeleteInfo,
    handleOpenModal: handleOpenRejectModal,
    handleCloseModal: handleCloseDeleteModal
  };

  const agreeInfoProps = {
    type: "agree",
    info: `是否同意 ${homework} 的申请`,
    isModalOpen: isAgreeInfo,
    handleOpenModal: handleOpenAgreeModal,
    handleCloseModal: handleCloseAgreeModal
  };

  const columns = [
    {
      title: "邀请人",
      dataIndex: "name",
      align: "center"
    },
    {
      title: "申请日期",
      dataIndex: "startTime",
      align: "center"
    },
    {
      title: "与学生关系",
      dataIndex: "relation",
      align: "center"
    },
    {
      title: "被邀请人姓名",
      dataIndex: "creators",
      align: "center"
    },
    {
      title: "操作",
      key: "option",
      valueType: "option",
      render: (text: any, record: any) => [
        <Button
          key="delete"
          danger
          type="link"
          onClick={() => handleOpenRejectModal(record)}
        >
          拒绝
        </Button>,
        <Button
          key="edit"
          type="link"
          style={{ marginLeft: "10px" }}
          onClick={() => handleOpenAgreeModal(record)}
        >
          同意
        </Button>
      ],
      align: "center"
    }
  ];
  const getTableProps: () => BaseTableProps<TableListItem> = () => ({
    columns,
    dataSource: tableListDataSource,
    rejectInfoProps,
    agreeInfoProps
  });
  return <BaseTable {...getTableProps()} />;
};
export default Invite;
